import './style.scss';
import { useState, forwardRef, useImperativeHandle, useRef ,useEffect } from 'react';
import { createPortal } from 'react-dom';

// 模态框对应的TS类型
export type ModalInterfaceType = {
    showMessage: (message: string)=> void
}
const Modal = forwardRef<ModalInterfaceType>((props, ref)=>{
    const [showModal, setShowModal] = useState(false);
    const [message, setMessage] = useState('');
    const divRef = useRef(document.createElement('div'))
    const divElement = divRef.current
    useImperativeHandle(ref, ()=>{
        return {
            showMessage(message:string){
                setMessage(message)
                setShowModal(true)
                setTimeout(()=>{
                    setShowModal(false)
                }, 1500)
            }
        }
    }, [])
     // 意思是说，把组件元素 渲染到divElement.current元素上面去
    useEffect(()=>{
        if(showModal){
            document.body.appendChild(divElement)
        } else {
            if(divElement.parentNode){
                document.body.removeChild(divElement)
            }
        }
        return ()=>{
            // 如果组件不用了就把它清理一下
            if(divElement.parentNode){
                document.body.removeChild(divElement)
            }
        }
    }, [showModal, divElement])
    /**
     * createPortal 不会把第一个参数里面的内容放到引用<Modal />的组件上去的
     * 而是会把这个组件放到createPortal第二个参数的这个div元素上
     * 
     * 我们的需求是想把这个modal的模态框挂到window.body
     */
   
    return createPortal( // 英文翻译是创建门户站点
        <div className="modal">
            <div className="modal-text">{message}</div>
        </div>
    , divElement); // 其实这个div元素创建了，但是却并没有确定这个div元素在哪
})
export default Modal;